<template>
	<view class="pupop">
		<view class="popup-box" :animation="animationData">
			<view class="pupop-btn">
				<view @tap="cancel">取消</view>
				<view @tap="confirm" style="color: #6E68E9;">确定</view>
			</view>
			<picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column v-if="column == 3">
					<view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
	</view>
</template>

<script>
	import addressList from './city-china.json'
	export default {
		data() {
			return {
				value: [],
				addressList,
				provinceList: [],
				cityList: [],
				areaList: [],
				indicatorStyle: `height: 50px;`,
				provinceIndex: 0,
				cityIndex: 0,
				areaIndex: 0,
				animationData: {},
				number: 0
			}
		},
		props: {
			column: {
				type: Number,
				default: 3
			},
			defaultValue: {
				type: String,
				default: () => null
			},
			visible: {
				type: Boolean,
				default: () => false
			},
			maskCloseAble: {
				type: Boolean,
				default: () => true
			}
		},
		watch: {
			visible(val) {
				this.changeActive()
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				var provinceList = []
				addressList.filter(item => {
					provinceList.push({
						code: item.code,
						name: item.name
					})
				})
				this.provinceList = [...provinceList]
				setTimeout(() => {
					if (!this.defaultValue) {
						this.cityList = addressList[0]?.children
						this.areaList = addressList[0]?.children[0]?.children
					} else {
						var city = {
							11: "北京",
							12: "天津",
							13: "河北",
							14: "山西",
							15: "内蒙古",
							21: "辽宁",
							22: "吉林",
							23: "黑龙江 ",
							31: "上海",
							32: "江苏",
							33: "浙江",
							34: "安徽",
							35: "福建",
							36: "江西",
							37: "山东",
							41: "河南",
							42: "湖北 ",
							43: "湖南",
							44: "广东",
							45: "广西",
							46: "海南",
							50: "重庆",
							51: "四川",
							52: "贵州",
							53: "云南",
							54: "西藏 ",
							61: "陕西",
							62: "甘肃",
							63: "青海",
							64: "宁夏",
							65: "新疆",
							71: "台湾",
							81: "香港",
							82: "澳门",
							91: "国外 "
						}
						if (city[this.defaultValue.substr(0, 2)]) {
							var province = this.defaultValue.substr(0, 2)
							var city = this.defaultValue.substr(0, 4)
							this.provinceIndex = 0
							this.cityIndex = 0
							this.areaIndex = 0
							this.provinceIndex = addressList.findIndex(obj => {
								return obj.code == province
							})
							this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
							this.cityList = addressList[this.provinceIndex]?.children
							this.cityIndex = this.cityList.findIndex(obj => {
								return obj.code == city
							})
							this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
							this.areaList = this.cityList[this.cityIndex]?.children
							this.areaIndex = this.areaList.findIndex(obj => {
								return obj.code == this.defaultValue
							})
							this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
							this.$nextTick(() => {
								if (this.column == 3) {
									this.value = [this.provinceIndex, this.cityIndex, this.areaIndex]
								} else if (this.column == 2) {
									this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
								}
							})
						} else {
							uni.showToast({
								title: '地区编码格式不正确',
								icon: 'none'
							})
						}
					}
					this.changeActive()
				}, 0)
			},
			confirm() {
				if (this.column == 3) {
					this.$emit('confirm', {
						provinceCode: addressList[this.provinceIndex].code,
						cityCode: addressList[this.provinceIndex]?.children[this.cityIndex].code,
						areaCode: addressList[this.provinceIndex]?.children[this.cityIndex]?.children[this.areaIndex]
							.code,
						name: addressList[this.provinceIndex].name + ' ' + addressList[this.provinceIndex]?.children[this
								.cityIndex].name + ' ' + addressList[this.provinceIndex]?.children[this.cityIndex]?.children[this.areaIndex].name,
						provinceName: addressList[this.provinceIndex].name,
						cityName: addressList[this.provinceIndex]?.children[this.cityIndex].name,
						areaName: addressList[this.provinceIndex]?.children[this.cityIndex]?.children[this.areaIndex]
							.name
					})
				} else if (this.column == 2) {
					this.$emit('confirm', {
						code: addressList[this.provinceIndex]?.children[this.cityIndex].children[this.areaIndex]
							.code.substring(0, 4) + '00',
						name: addressList[this.provinceIndex].name + addressList[this.provinceIndex]?.children[this
							.cityIndex].name,
						provinceName: addressList[this.provinceIndex].name,
						cityName: addressList[this.provinceIndex]?.children[this.cityIndex].name
					})
				} else {
					uni.showToast({
						title: '目前column只能传2和3',
						icon: 'none'
					})
				}
			},
			cancel() {
				this.$emit('cancel')
			},
			// 动画
			changeActive() {
				var active = '-700rpx'
				if (this.visible) {
					active = 0
				}
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'linear'
				})
				animation.bottom(active).step()
				this.animationData = animation.export()
			},
			bindChange(e) {
				e.detail.value[0] = e.detail.value[0] || 0
				e.detail.value[1] = e.detail.value[1] || 0
				e.detail.value[2] = e.detail.value[2] || 0
				if (e.detail.value[0] != this.provinceIndex) {
					// console.log('监听第一列')
					// #ifdef APP || H5
					this.number += 1
					// #endif
					this.provinceChange(e.detail.value[0])
				} else if (e.detail.value[1] != this.cityIndex) {
					// console.log('监听第二列')
					this.cityChange(e.detail.value[1])
				} else if (e.detail.value[2] != this.areaIndex) {
					// console.log('监听第三列')
					this.areaChange(e.detail.value[2])
				}
			},
			// 监听第一列变化
			provinceChange(e) {
				// #ifdef APP || H5
				if(this.number <= 4) {
					this.provinceIndex = 0
					this.value = [...[0, 0, 0]]
					this.cityList = addressList[0]?.children
					this.areaList = addressList[0]?.children[0]?.children
				} else {
					this.provinceIndex = e
					this.value = [...[e, 0, 0]]
					this.cityList = addressList[e]?.children
					this.areaList = addressList[e]?.children[0]?.children
				}
				// #endif
				// #ifdef MP-WEIXIN
				this.provinceIndex = e
				this.value = [...[e, 0, 0]]
				this.cityList = addressList[e]?.children
				this.areaList = addressList[e]?.children[0]?.children
				// #endif
				this.cityIndex = 0
				this.areaIndex = 0
				
			},
			// 监听第二列变化
			cityChange(e) {
				this.cityIndex = e
				this.areaIndex = 0
				this.value = [...[this.provinceIndex, e, 0]]
				this.cityList = addressList[this.provinceIndex]?.children
				this.areaList = addressList[this.provinceIndex]?.children[e]?.children
			},
			// 监听第三列变化
			areaChange(e) {
				this.areaIndex = e
			},
			// 点击模态框
			close() {
				if (this.maskCloseAble) {
					this.cancel()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.pupop {
		.popup-box {
			position: fixed;
			left: 0;
			bottom: -700rpx;
			z-index: 99999;
			background: #fff;
			padding-bottom: 50px;
			border-radius: 20rpx;

			.pupop-btn {
				height: 40px;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				justify-content: space-between;
			}
		}

		.pupop-model {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			background: rgba(0, 0, 0, .5);
		}

		.pupop-models {
			display: none;
		}

		.picker-view {
			width: 750rpx;
			height: 225px;
			margin-top: 20rpx;
		}

		.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
			line-height: 50px;
		}
	}
</style>